import axios from 'axios'
import { ElMessage } from 'element-plus'
import {useStore} from '@/store/counter.js'
import router from '@/router'
// import {useRouter} from 'vue-router'
// const router = useRouter()
const store = useStore()
// axios.create 创建一个axios实例，可以通过实例来请求接口
const service = axios.create({
  // baseUrl: 基地址（每个接口都有的地址），作用：后面封装的接口，接口的地址都会和baseUrl自动拼接到一起
  baseURL: "/api",
  // 超时时间，
  timeout: 5000, // request timeout
})

// 请求拦截器：发送请求的时候执行
service.interceptors.request.use(
  config => {
    // config携带的就是请求信息，并且return不能省略
    // 这个函数通常配置请求头，携带token
    const token = store.token
    // console.log(token);
    
    if (token) {
      // 有时要拼接Bearer
      config.headers.Authorization = token
    }
    // console.log('请求拦截器',config);
    
    return config
  },
  error => {
    // 发生错误时执行
    return Promise.reject(error)
  }
)

// 响应拦截器：当服务器返回数据的时候，数据流转的第一站
service.interceptors.response.use(
  res => { 
    // 响应成功，状态码为2xx
    // console.log('开始响应',res);
    
    if (res.status != 200) {
      ElMessage.error(res.data.msg)
      return Promise.reject(res.data)
    } else {
      // console.log('响应成功');
      return res.data
    }
  },
  error => {
    // 响应失败：状态码为4xx-5xx
    // 可以进行统一的错误处理
    // 登录界面的错误处理提示


    if (error.status == 401) {
      // token 过期
      console.log('token过期了');
      // 清空token并且跳转到登录界面
      store.userInfo = null
      store.token = null
      localStorage.clear()
      ElMessage.error('登录过期，请重新登录')
      router.push('/login')
    }
    ElMessage.error('响应失败')
    // 判断token是否过期
    console.log('失败信息',error)
    return Promise.reject(error)
  }
)

export default service
